<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="form" :model="form" :rules="rules" label-width="140px">
      <el-form-item label="邀请数量" prop="inviteCount">
        <el-input type="number" placeholder="邀请数量" v-model="form.inviteCount" class="col" maxlength="3"/>
      </el-form-item>
      <el-form-item label="邀请奖励益联券" prop="inviteVoucher">
        <el-input type="number" placeholder="邀请奖励益联券" v-model="form.inviteVoucher" class="col" maxlength="4"/>
      </el-form-item>
      <el-form-item label="邀请奖励抵用金" prop="offsetAmount">
        <el-input type="number" placeholder="邀请奖励益联券" v-model="form.offsetAmount" class="col" maxlength="4"/>
      </el-form-item>
      <el-form-item label="一级返佣比列" prop="brokerage">
        <el-input
            type="number"
            placeholder="消费积分比例(请输入0到1的数)"
            v-model.number="form.brokerage"
            class="col"
            @change="checkRatio"
            :min="0"
            :max="1"
            step="0.01"/>
      </el-form-item>
      <el-form-item label="二级返佣比列" prop="brokerageTwo">
        <el-input
            type="number"
            placeholder="消费积分比例(请输入0到1的数)"
            v-model.number="form.brokerageTwo"
            class="col"
            @change="checkRatio"
            :min="0"
            :max="1"
            step="0.01"/>
      </el-form-item>
      <el-form-item label="市级抽成比列" prop="cityBili">
        <el-input
            type="number"
            placeholder="市级抽成比列"
            v-model.number="form.cityBili"
            class="col"
            @change="checkRatio"
            :min="0"
            :max="1"
            step="0.01"/>
      </el-form-item>
      <el-form-item label="区级抽比列比列" prop="areaBili">
        <el-input
            type="number"
            placeholder="区级抽比列比列"
            v-model.number="form.areaBili"
            class="col"
            @change="checkRatio"
            :min="0"
            :max="1"
            step="0.01"/>
      </el-form-item>
      <el-form-item label="券和积分转换比列" prop="conversion">
        <el-input
            type="number"
            placeholder="券和积分转换比列"
            v-model.number="form.conversion"
            class="col"
            @change="checkRatio"
            :min="0"
            :max="1"
            step="0.01"/>
      </el-form-item>
      <el-form-item label="转账手续费比例" prop="transactionFeeRatio">
        <el-input
            type="number"
            placeholder="转账手续费比例(请输入0到1的数)"
            v-model.number="form.transactionFeeRatio"
            class="col"
            @change="checkTransactionFeeRatio"
            :min="0"
            :max="1"
            step="0.01"/>
      </el-form-item>
      <el-form-item label="会员价格" prop="vipPrice">
        <el-input type="number" placeholder="会员价格" v-model="form.vipPrice" class="col" maxlength="5"/>
      </el-form-item>
      <el-form-item label="会员奖励" prop="vipGive">
        <el-input type="number" placeholder="会员奖励" v-model="form.vipGive" class="col" maxlength="5"/>
      </el-form-item>
      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary" @click="handlerSubmit" v-has-permi="['admin:commodity:save']">保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {detail, save} from "@/api/basicConfig";
import {getForm} from "@/utils/utils";

export default {
  props:{
    id:{
      default:null
    }
  },
  data(){
    return{
      form:{
        id:null,
        inviteCount:'',
        inviteVoucher:'',
        offsetAmount:'',
        brokerage:0,
        brokerageTwo:0,
        transactionFeeRatio:0,
        vipPrice:'',
        vipGive:'',
        cityBili:'',
        areaBili:'',
        conversion:'',
      },
      rules:{
        inviteCount: [{ required: true, message: '请填写邀请数量', trigger: ['blur'] }],
        inviteVoucher: [{ required: true, message: '请填写邀请奖励积分', trigger: ['blur'] }],
        offsetAmount: [{ required: true, message: '请填写邀请奖励抵用金', trigger: ['blur'] }],
        brokerage: [{ required: true, message: '请填写一级返佣比例', trigger: ['blur'] }],
        brokerageTwo: [{ required: true, message: '请填写二级返佣比例', trigger: ['blur'] }],
        cityBili: [{ required: true, message: '请填写市级抽成比列', trigger: ['blur'] }],
        areaBili: [{ required: true, message: '请填写区级抽比列比列', trigger: ['blur'] }],
        conversion: [{ required: true, message: '请填写券和积分转换比列', trigger: ['blur'] }],
        transactionFeeRatio: [{ required: true, message: '请填写转账手续费比例', trigger: ['blur'] }],
        vipPrice: [{ required: true, message: '请填写会员价格', trigger: ['blur'] }],
        vipGive: [{ required: true, message: '请填写会员价格', trigger: ['blur'] }],
      },
      roles:[],
      saveLoading:false,
      formLoading:false,
    }
  },
  mounted() {
    if(this.id){
      this.getDetail();
    }
  },
  methods:{
    checkRatio() {
      if (this.form.consumptionRatio < 0) {
        this.form.consumptionRatio = 0;
      } else if (this.form.consumptionRatio > 1) {
        this.form.consumptionRatio = 1;
      }
    },
    checkTransactionFeeRatio() {
      if (this.form. transactionFeeRatio < 0) {
        this.form.transactionFeeRatio = 0;
      } else if (this.form.transactionFeeRatio > 1) {
        this.form.transactionFeeRatio = 1;
      }
    },
    getDetail(){
      this.formLoading=true
      detail(this.id).then(res=>{
        getForm(res,this.form);
      }).finally(()=>{
        this.formLoading=false;
      })
    },
    handlerSubmit(){
      if(this.saveLoading||this.formLoading){
        return;
      }
      this.$refs.form.validate(valid=>{
        if(!valid)return;
        this.saveLoading=true;
        save(this.form).then(()=>{
          this.$message.success('保存成功');
          this.close();
        }).finally(()=>{
          this.saveLoading=false
        })
      })
    },
    close(){
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style lang="scss" scoped>
.col{
  width: 360px;
}
.img{
  width: 120px;
  height: 120px;
  margin-right: 10px;
}
.imgList{
  display: flex;
  flex-wrap: wrap;
  .img{
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }
}
</style>
